<template>
  <div class="score" >
    
    <Title :isNecessary="question.isNecessary" :no="no" :title="question.title"></Title>
    <div class="option">
      <span class="content">{{showuptext()}}</span>
      <el-radio-group v-model="radio" @change="select">
        <el-radio v-for="item in question.options" :label="item.id">{{item.score}}</el-radio>
      </el-radio-group>
      <span class="content">{{showfinaltext()}}</span>
    </div>
  </div>
</template>

<script>
import Title from './Title.vue'

export default {
  name:'Score',
  components: {
    Title,
  },
  data(){
   return {
     
   }
  },
  props: {
    question: {
      type: Object,
      default: {}
    },
    no: {
      type: Number,
      default: 0
    },
    radio: {
      type: Number,
      default: 100
    }
    
  },
  methods: {
    showuptext() {
      if(this.question.options.length == 0){
        return ''
      }
      else 
        return this.question.options[0].text
    },
    showfinaltext() {
      if(this.question.options.length == 0){
        return ''
      }
      else 
        return this.question.options[this.question.options.length-1].text
    },

    select() {
      this.question.answer[0] = this.radio
      this.$emit('changeRadio', this.question)
    },

    getRadio() {
      if(this.question.answer != null) {
        this.checkScore = this.question.answer[0]
        return
      }
    }
  },
}
</script>

<style scoped>
  .score {
    padding-top: 1.5rem;
    padding-left: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid gainsboro;
  }

  .option {
    font-size: 1rem;
    margin-top: 0.5rem;
  }
  
  .el-radio {
    margin: 1rem;
  }
</style>
